<template>
  <div>
    <div v-if="showLoading">
      <loading></loading>
      <default-address v-on:childByValue="childByValue" style="display: none"></default-address>
    </div>
    <div v-if="!showLoading">
      <div v-if="waterbill_list!=undefined && waterbill_list != null && waterbill_list != '' && waterbill_list.length >0">
        <div class="bookingCarouse">
          <mu-carousel transition="fade" style="height: 100%" :cycle="cycle" :active.sync="active"  change>
            <mu-icon value="arrow_back" slot="left" color="#e6e6e6"></mu-icon>
            <mu-icon value="arrow_forward" slot="right" color="#e6e6e6"></mu-icon>
            <template slot="indicator" slot-scope="{ index, active }">
              <mu-button icon class="mu-carousel-indicator-button" :class="{'mu-carousel-indicator-button__active': active}" @click="changeActive(index)">
                <span class="rect-indicator"></span>
              </mu-button>
            </template>
            <div v-for="bil in waterbill_list">
              <mu-carousel-item>
                <img :src="bil.goods_img">
              </mu-carousel-item>
            </div>
          </mu-carousel>
        </div>
        <div class="bookContentText white_bac">
          <p style="margin-bottom: 0.3rem">{{waterChoose.goods_name}}</p>
          <p>余票<span class="bookText font-weight" style="font-size: 1rem">{{waterChoose.rest_num}}</span>张
            <span @click="toBuyNow(waterChoose)" v-if="waterChoose.rest_num <= 0" class="bookText" style="margin-left: 0.5rem">立即购买>></span>
          </p>
        </div>
        <div class="chooseNum flex" style="margin-top: 0.5rem">
          <div>
            <mu-button v-if="currentNum > 1" color="primary" @click="minusNum()">-</mu-button>
            <mu-button v-if="currentNum <= 1" disabled>-</mu-button>
          </div>
          <input type="text" v-model="currentNum" class="bookingInput"/>
          <div>
            <mu-button v-if="currentNum < waterChoose.rest_num" color="primary" @click="addNum()">+</mu-button>
            <mu-button v-if="currentNum >= waterChoose.rest_num" disabled>+</mu-button>
          </div>
        </div>
        <default-address v-on:childByValue="childByValue"></default-address>
        <div class="bookingRemark white_bac">
          <mu-text-field class="bookingRemarkText" v-model="description" placeholder="有特殊要求请在这里备注" multi-line :rows="2" :rows-max="3"></mu-text-field>
        </div>
        <div class="bookingButton positon_fix" @click="sureBookingWater">
          <mu-button color="error">确定订水</mu-button>
        </div>
      </div>
      <div class="demo-text noTick flex flex_column" v-if="waterbill_list==undefined || waterbill_list == null || waterbill_list =='' || waterbill_list.length <= 0">
        <no-water-bill></no-water-bill>
      </div>
    </div>
  </div>
</template>

<script>
  import NoWaterBill from "./NoWaterBill";
  import DefaultAddress from "../../components/DefaultAddress";
  import Loading from "../../../components/loading";

  export default {
    data(){
      return{
        position: 'top',
        showLoading:true,//显示loading
        active:0,
        cycle:false,
        index:0,
        waterChoose:{
          goods_name:'',
          rest_num:0,
        },
        currentNum:1,
        waterbill_list:[],
        defaultAddress:'',
        description:''
      }
    },
    mounted(){
      this.checkLogin();

      this.initList();
    },
    methods:{
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值

        this.defaultAddress = childValue;
      },
      initList(){
        this.yesS.memberWaterbill(
          this.$comParams()
        ).then(res => {
          this.waterbill_list = res.data.waterbill_list;
          if(!this.isEmpty(this.waterbill_list) && this.waterbill_list.length >0){
            this.waterChoose = this.waterbill_list[0];
          }
          this.currentNum =1;
          this.showLoading = false;
          this.$nextTick(function () {
            this.initH();
          })
        })
      },
      initH(){
        var allH = document.documentElement.clientHeight;
        var headerH = $('.header').height();
        var muTabsH = $('.mu-tabs').height();
        var footH = $('.bookingButton').height();
        var h = allH - headerH - muTabsH - footH;
        $('.bodyContent').css('height',h + 'px');
      },
      minusNum(){
        this.currentNum--;
      },
      addNum(){
        this.currentNum++;
      },

      sureBookingWater(){
        if(this.isEmpty(this.defaultAddress) || this.isEmpty(this.defaultAddress.id)){
          this.$alert('您暂无收货地址，请点击添加', '提示');
          return;
        }
        //您确定要购买  xx桶水？
        this.$confirm('您确定要购买'+this.currentNum +'桶水？', '提示', {
          type: 'warning'
        }).then(({ result }) => {
          if (result) {
            //判断是否满足商家设置的限购量
            this.checkNum();
          }
        });
      },
      checkNum(){
        this.yesS.checkBuyNum(
          this.$comParams()
        ).then(res => {
          var buyInfo = res.data.buy_info;
          console.log(buyInfo);
          //如果不在限量中则提示
          var content ='';
          var min_num = buyInfo.buy_min;
          var max_num = buyInfo.buy_max;
          if(max_num >0 && this.allCount > max_num){
            //判断购买的商品数量是否超过最大购买数量
            content =  '最高购买数量为 '+ max_num +' 件';
          }
          if(min_num >= 1 && this.allCount < min_num){
            content = '最低购买数量为 ' + min_num +' 件';
          }
          if(this.isEmpty(content)){
            //如果满足则
            this.bookingWaterEnd();
          }else {
            this.$toast.error(content);
            return;
          }

        })
      },
      bookingWaterEnd(){
        var obj = this.waterChoose;
        var addres = this.defaultAddress;

        var addressDetail = addres.area_info +" "+addres.position_address+addres.address;
        this.yesS.addWaterBillOrder(this.$combineParams({
          id:obj.id,
          num:this.currentNum,
          buyer_name:addres.name,
          mobile:addres.mobile,
          buyer_address:addressDetail,
          description:this.description
        })).then(res => {
          var status = res.status;
          var _self = this;
          setTimeout(function () {
            //跳转到支付成功页面
            if(status == 1){
              _self.$router.push({path:'/qds/Success',query:{toType:1}})
            }
          },1000)
        })
      },
      toBuyNow(obj){
        console.log(obj)
        this.$router.push({
          path:'/qds/waterbilllist',
          query:{'type':1}
        })
      },
    },
    watch:{
      active:{
        handler(curVal,oldVal){
          if(!this.isEmpty(this.waterbill_list) && this.waterbill_list.length >0){
            this.waterChoose = this.waterbill_list[curVal];
            if(this.waterChoose.rest_num < this.currentNum){
              this.currentNum = this.waterChoose.rest_num;
            }
          }
        },
        deep:true
      }
    },
    components: {
      Loading,
      DefaultAddress,
      NoWaterBill

    },
  }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  @import "../css/bookingWater.css";
</style>
